<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				margin: 0;
			}
			.popup {
				width: 500px;
				background-color: rgba(0, 0, 0, 0.5);
				border: 2px solid rgba(2, 171, 255, 0.8);
			}
			header {
				padding-left: 30px;
				display: flex;
				align-items: center;
				font-size: 30px;
				background: linear-gradient(270deg, rgba(5, 63, 113, 0) 0%, rgba(2, 171, 255, 0.6) 100%);
				height: 80px;
				line-height: 100px;
				color: #fff;
			}
			header::before {
				display: block;
				width: 30px;
				height: 30px;
				content: '';
				background-color: #02abff;
				border-radius: 50%;
				margin-right: 15px;
			}
			.content {
				display: flex;
				padding: 20px 0px;
				justify-content: space-around;
			}
			.content .item {
				display: flex;
				align-items: center;
			}
			.content .item:nth-child(n + 2) {
				margin-top: 10px;
			}
			.desc {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				max-height: 500px;
				overflow: auto;
				padding: 15px 10px;
			}
			.content .item .key {
				width: 120px;
				font-size: 26px;
				color: #fff;
			}
			.value {
				font-size: 26px;
				background: rgba(2, 171, 255, 0.1);
				flex: 1;
				box-shadow: inset 0px 0px 4px 0px rgba(51, 255, 247, 0.8);
				margin-left: 20px;
				padding: 10px 10px;
				color: #fff;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</style>
	</head>
	<body>
		<div class="popup">
			<header class="e-name">构件信息</header>
			<div class="content">
				<div class="desc">
					<div class="item">
						<div class="key">平均速度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			const queryString = window.location.search
			const urlParams = new URLSearchParams(queryString)
			const info = JSON.parse(urlParams.get('info'))
			// console.log("info", JSON.parse(info));
			const attrBody = document.querySelector('.desc')
			console.log('属性弹框', info)
			let str = ''
			for (let key in info) {
				str += `<div class="item">
						<div class="key">${key}:</div>
						<div class="value" title="${info[key]}" style="color:${info[key] == '三级预警' ? 'red' : '#fff'}">${info[key]}</div>
					    </div>`
			}
			attrBody.innerHTML = str
			const title = urlParams.get('title')
			document.querySelector('.e-name').innerText = title || '构件信息'

			document.querySelector('.close').addEventListener('click', () => {
				ue.internal.closewindow()
			})
		</script>
	</body>
</html>
